.main {
  min-height: calc(100vh - 160px);
  font-family: cursive;

  ul {
    display: flex;
    flex-wrap: wrap;

    li {
      list-style: none;
      font-size: 16px;
      color: #4A8AF4;
      padding: 12px;
      padding-bottom: 0;
      width: 240px;
      border: 1px solid #ddd;
      box-shadow: 2px 2px 1px 2px;
      margin: 8px 16px;

      span:nth-child(1) {
        cursor: pointer;
      }

      span:nth-child(3) {
        font-size: 14px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical; // 垂直
        -webkit-line-clamp: 3; // 垂直展示3行
        color: #888;
      }

      span:nth-child(4) {
        font-size: 12px;
        margin: 8px 0;
        display: block;
        text-align: right;
        cursor: pointer;
      }
    }

    li:hover {
      color: #149E5B;
    }
  }

  .soft-detail {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding: 20px 10%;
    background: rgba(200, 200, 200, .9);

    .detail-content {
      overflow: auto;
      border: 1px solid #aaa;
      min-height: 400px;
      max-height: calc(100vh - 40px);
      width: 100%;
      background: #EEE;
      box-shadow: 4px 4px 10px 4px #666;
      padding: 8px;
    }
  }
}
